<!--
 * @Author: your name
 * @Date: 2019-11-09 14:42:48
 * @LastEditTime : 2019-12-18 14:31:50
 * @LastEditors  : Please set LastEditors
 * @Description: 头部组件
 * @FilePath: \vue_et\src\components\HeadNav.vue
 -->
<template>
  <div
    class="headnav"
    :style="{background:background,position:fixed?'fixed':'relative',color:color}"
    :class="{border:border}"
  >
    <div class="icon_" @click.stop="Back()" v-show="arrow">
        <BackIcon :color="color"/>
    </div>
    <div class="title">{{title}}</div>
    <div class="slot">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeadNav",
  props: {
    border:{
      type: Boolean,
      default: true
    },
    background: {
      type: String,
      default: "#fff"
    },
    arrow: {
      type: Boolean,
      default: true
    },
    path: {
      type: String,
      default: "-1"
    },
    fixed: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#223322"
    }
  },
  data() {
    return {

    };
  },

  mounted() {},
  methods: {
    Back() {
      if (this.path === "-1") {
        this.$router.go(-1);
      } else {
        this.$router.push(this.path);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.border{
  box-shadow: 0 0 20px 4px rgba(0, 0, 0, .1);
}
.headnav {
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 99;
  .icon_ {
    position: absolute;
    top: 0;
    left: 0;
    flex-shrink: 0;
    width: 84px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    svg{
      width: 32px;
      height: 32px;
    }
  }
  .slot {
    position: absolute;
    top: 0;
    right: 0;
    flex-shrink: 0;
    width: 200px;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title {
    flex: 1;
    height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
  }
}
</style>